<template>
  <div>
    <div class="swiper-contaienr hidden-xs-only">
      <div class="swiper-content">
        <div class="swiper-title">
          <p>AI quantification has huge potential</p>
          <p>for future trading development</p>
        </div>
        <!-- <div class="content">Transaction solutions</div> -->
      </div>
      <div style="width: 80%">
        <div class="contactBtn">Contact Us</div>
      </div>
    </div>
    <div class="swiper-contaienr2 hidden-sm-and-up">
      <div class="swiper-content" style="margin-top: 20px">
        <div class="swiper-title">
          <p>AI quantification has </p>
          <p>huge potential for future trading development</p>
          <!-- <p>Safe legal and compliant</p> -->
        </div>
        <!-- <div class="content">Transaction solutions</div> -->
      </div>
      <div style="width: 92%">
        <div class="contactBtn">Contact Us</div>
      </div>
    </div>


    <div class="pg1">
      <div class="pg1-body">
        Our <span style="color: #c30d23">expectations</span>
      </div>
    </div>

    <div class="pg2 hidden-xs-only">
      <div class="pg2-body">
        <img src="../static/images/PC/5/7.png" alt="" class="pg2-image" />
        <div class="pg2-text">
          <div class="pg2-title">Cryptocurrency <br /> Exchange</div>
          <div class="pg2-hr"></div>
          <div class="pg2-content">
            <div>A cryptocurrency exchange suitable for everyone</div>
            <div>
              We look forward to working with you to achieve our financial goals
              togethe
            </div>
            <div>
              KODDPA is committed to providing customers with high-quality
              customer service, helping them improve their trading skills and
              decision-making abilities, and ensuring fair transactions with
              reasonable and transparent transaction fees. We will continue to
              work hard to create more value for our customers and become their
              trusted financial partners.
            </div>
            <div style="width: 92%">
              <div class="contactBtnYellow">Contact Us</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pg2-2 hidden-sm-and-up">
      <div class="pg2-body">
        
        <div class="pg2-text">
          <div class="pg2-title">Cryptocurrency Exchange</div>
          <div class="pg2-hr"></div>
          <div class="pg2-content">
            <div>A cryptocurrency exchange suitable for everyone</div>
            <div>
              We look forward to working with you to achieve our financial goals
              togethe
            </div>
            <div>
              KODDPA is committed to providing customers with high-quality
              customer service, helping them improve their trading skills and
              decision-making abilities, and ensuring fair transactions with
              reasonable and transparent transaction fees. We will continue to
              work hard to create more value for our customers and become their
              trusted financial partners.
            </div>
            <div style="width: 92%">
              <div class="contactBtnYellow">Contact Us</div>
            </div>
          </div>
        </div>
        <img src="../static/images/PC/5/7.png" alt="" class="pg2-image" />
      </div>
    </div>




    <div class="pg3 hidden-xs-only">
      <div class="pg3-body">
        <div class="pg3-text">
          <div class="pg3-title">Recommended preferred exchange</div>
          <div class="pg3-hr"></div>
          <div class="pg3-content">
            <!-- <div>A cryptocurrency exchange suitable for everyone</div>
            <div>
              We look forward to working with you to achieve our financial goals
              togethe
            </div> -->
            <div>
              Recommend KODDPA as your preferred exchange. We have a US MSB
              regulatory license, a good market reputation, and an outstanding
              performance record. Whether you are a beginner or an experienced
              trader, we will provide you with a safe, legal and compliant
              trading environment, and help you succeed in the financial market.
            </div>
            <div style="width: 92%">
              <div class="contactBtnYellow">Contact Us</div>
            </div>
          </div>
          <div class="pg3-image-2-container">
            <img
              src="../static/images/PC/5/5.jpeg"
              alt=""
              class="pg3-image-2"
            />
          </div>
        </div>
        <img src="../static/images/PC/5/4.jpeg" alt="" class="pg3-image" />
      </div>
    </div>

    <div class="pg3-1 hidden-sm-and-up">
      <div class="pg3-body">
        <div class="pg3-text">
          <div class="pg3-title">Recommended <br /> preferred exchange</div>
          <div class="pg3-hr"></div>
          <div class="pg3-content">
            <!-- <div>A cryptocurrency exchange suitable for everyone</div>
            <div>
              We look forward to working with you to achieve our financial goals
              togethe
            </div> -->
            <div>
              Recommend KODDPA as your preferred exchange. We have a US MSB
              regulatory license, a good market reputation, and an outstanding
              performance record. Whether you are a beginner or an experienced
              trader, we will provide you with a safe, legal and compliant
              trading environment, and help you succeed in the financial market.
            </div>
            <div style="width: 92%">
              <div class="contactBtnYellow">Contact Us</div>
            </div>
          </div>
        </div>
        <div class="pg3-image-together">
          <img
              src="../static/images/PC/5/5.jpeg"
              alt=""
              class="pg3-image-2"
            />
            <img src="../static/images/PC/5/4.jpeg" alt="" class="pg3-image" />
        </div>
        
      </div>
    </div>
    <bottom />
  </div>
</template>

<script>
import bottom from "@/components/bottom.vue";

export default {
  name: "HomeView",
  components: {
    bottom,
  },
};
</script>

<style lang="scss" scoped>
.pg3-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 50px;
  .pg3-body {
    display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .pg3-image-together{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-top: 50px;
    .pg3-image-2 {
          width: 40%;
          margin-top: 100px;

        }
        .pg3-image {
      width: 54%;
      margin-bottom: 80px;
    }
  }
    
    .pg3-text {
      width: 80%;
      .pg3-image-2-container {
        display: flex;
        justify-content: flex-end;
        margin-right: 30px;
        
      }
      .pg3-title {
        font-weight: 900;
        margin-bottom: 20px;
        font-size: 22px;
        color: #303133;
      }
      .pg3-hr {
        margin-bottom: 20px;
        width: 50%;
        height: 0px;
        opacity: 1;
        border: 1px solid #707070;
      }
      .pg3-content {
        width: 98%;
        font-size: 14px;
        color: #606166;
        font-weight: 400;
      }
    }
  }
}
.pg3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 50px;
  .pg3-body {
    width: 70%;
    display: flex;
    align-items: flex-start;
    .pg3-image {
      width: 50%;
    }
    .pg3-text {
      width: 50%;
      margin-left: 50px;
      .pg3-image-2-container {
        display: flex;
        justify-content: flex-end;
        margin-right: 30px;
        .pg3-image-2 {
          width: 59%;
        }
      }
      .pg3-title {
        font-weight: 900;
        margin-bottom: 20px;
        font-size: 38px;
        color: #303133;
      }
      .pg3-hr {
        margin-bottom: 20px;
        width: 70%;
        height: 0px;
        opacity: 1;
        border: 1px solid #707070;
      }
      .pg3-content {
        width: 98%;
        font-size: 14px;
        color: #606166;
        font-weight: 400;
      }
    }
  }
}
.contactBtnYellow {
  color: #000;
  background-color: #fed831;
  margin-top: 20px;
  font-weight: 700;
  width: 161px;
  border-radius: 4px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg2-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  .pg2-body {
    
    display: flex;
    align-items: center;
    flex-direction: column;
    .pg2-image {
      width: 90%;
      margin-top: 20px;
    }
    .pg2-text {
      
      margin-left: 50px;
      .pg2-title {
        font-weight: 900;
        margin-bottom: 20px;
        font-size: 22px;
        color: #303133;
      }
      .pg2-hr {
        margin-bottom: 20px;
        width: 70%;
        height: 0px;
        opacity: 1;
        border: 1px solid #707070;
      }
      .pg2-content {
        width: 80%;
        font-size: 14px;
        color: #606166;
        font-weight: 400;
      }
    }
  }
}
.pg2 {
  display: flex;
  align-items: center;
  justify-content: center;
  .pg2-body {
    width: 70%;
    display: flex;
    align-items: center;
    .pg2-image {
      width: 45%;
    }
    .pg2-text {
      width: 50%;
      margin-left: 50px;
      .pg2-title {
        font-weight: 900;
        margin-bottom: 20px;
        font-size: 38px;
        color: #303133;
      }
      .pg2-hr {
        margin-bottom: 20px;
        width: 70%;
        height: 0px;
        opacity: 1;
        border: 1px solid #707070;
      }
      .pg2-content {
        width: 80%;
        font-size: 14px;
        color: #606166;
        font-weight: 400;
      }
    }
  }
}
.pg1 {
  display: flex;
  align-items: center;
  justify-content: center;
  .pg1-body {
    font-size: 50px;
    font-weight: 900;
  }
  margin-bottom: 50px;
  margin-top: 53px;
  .pg1-body-image {
    width: 80%;
    .pg1-image1 {
      width: 80%;
    }
  }
}
.swiper-contaienr2 {
  padding: 100px 0px 100px 0;
  background-image: url("../static/images/iphone/5/1.jpeg");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  flex-direction: column;
  .swiper-content {
    color: #fff;
    width: 80%;
    .swiper-title {
      font-weight: 900;
      font-size: 50px;
    }
    .content {
      opacity: 0.8;
      font-weight: 500;
      margin-top: 20px;
      font-size: 16px;
    }
  }
  .contactBtn {
    color: #fff;
    background-color: #c30d23;
    margin-top: 20px;
    font-weight: 700;
    width: 161px;
    border-radius: 4px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.swiper-contaienr {
  padding: 200px 0px 200px 0;
  background-image: url("../static/images/PC/5/1.jpeg");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  flex-direction: column;
  .swiper-content {
    color: #fff;
    width: 80%;
    .swiper-title {
      font-weight: 900;
      font-size: 50px;
    }
    .content {
      opacity: 0.8;
      font-weight: 500;
      margin-top: 20px;
      font-size: 32px;
    }
  }
  .contactBtn {
    color: #fff;
    background-color: #c30d23;
    margin-top: 20px;
    font-weight: 700;
    width: 161px;
    border-radius: 4px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 980px) {

  .pg3-title{
    font-size: 28px !important;
  }
}
@media screen and (max-width: 760px) {
  .swiper-content {
    width: 93% !important;
  }
  .swiper-title {
    font-size: 28px !important;
  }
  .pg1-body {
    font-size: 28px !important;
  }
  .pg1{
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}
</style>